<template>
  <div>
    <q-layout>
      <q-layout-header ref="header">
        <xheader :title="title"></xheader>
      </q-layout-header>
      <q-page-container>

        <q-page>

          <q-tabs position="top" ref="tab" v-model="tabIndex">
            <!-- 选项卡 - 注意slot="title" -->
            <q-tab default slot="title" label="月产量" name="month" @select="showMonthData"/>
            <q-tab slot="title" label="日产量" name="days" @select="showDaysData"/>
            <q-tab slot="title" label="月产量进度" name="monthProgress" @select="showMonthProgressData"/>
          </q-tabs>
          <div v-show="tabIndex==='month'">
            <xscrollarea :scroll-height="scrollHeight">
              <canvas ref="month" class="fit"></canvas>
            </xscrollarea>
          </div>
          <div v-show="tabIndex==='days'">
            <xscrollarea :scroll-height="scrollHeight">
              <canvas ref="days" class="fit"></canvas>
            </xscrollarea>
          </div>
          <div v-show="tabIndex==='monthProgress'">
            <xscrollarea :scroll-height="scrollHeight">
              <canvas ref="monthProgress" class="fit"></canvas>
            </xscrollarea>
          </div>
        </q-page>

      </q-page-container>
    </q-layout>

  </div>
</template>

<script>
import Xheader from '../../components/xheader'
import Xscrollarea from '../../components/xscrollarea'
import F2 from '@antv/f2'
import 'lodash'
import { monthData, daysData, monthProgressData } from '../../js/mockData'

export default {
  name: 'ingotworkshopoutput',
  components: {
    Xscrollarea,
    Xheader
  },
  props: {
    title: {}
  },
  data: () => ({
    tabIndex: 'month',
    list: [],
    length: 0,
    index: 0,
    showHelp: false,
    time: '',
    week: '',
    monthData: [],
    daysData: [],
    monthProgressData: {},
    scrollHeight: 0,
    monthChart: {},
    daysChart: {},
    monthProgressChart: {}
  }),
  mounted () {
    this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight - this.$refs.tab.$el.clientHeight
    this.initCharts()
  },
  methods: {
    getData () {
      this.axios.post(this.$conf.server + '/ekanban/planCompleteRate').then(res => {
        if (res.data.result) {
          this.time = res.data.planData.time
          this.week = res.data.planData.week
          this.monthData = res.data.planData.list_month
          this.daysData = res.data.planData.list_7_days
          this.monthProgressData = res.data.planData.monthPlanQty
          this.showMonthData()
        }
      })
    },
    showMonthData () {
      if (Object.keys(this.monthChart).length === 0) {
        if (process.env.NODE_ENV === 'development') {
          this.monthData = monthData
        }
        if (this.monthData && this.monthData.length) {
          this.monthChart = new F2.Chart({
            el: this.$refs.month,
            pixelRatio: window.devicePixelRatio // 指定分辨率
          })
          this.monthChart.source(this.transMonthData(this.monthData.slice(0, 9)))

          this.monthChart.coord({
            transposed: true
          })
          this.monthChart.axis('DEVICE_CODE', {
            line: F2.Global._defaultAxis.line,
            grid: null
          })
          this.monthChart.axis('WEIGHT', {
            line: null,
            grid: F2.Global._defaultAxis.grid,
            label: (text, index, total) => {
              let textCfg = {}
              if (index === 0) {
                textCfg.textAlign = 'left'
              } else if (index === total - 1) {
                textCfg.textAlign = 'right'
              }
              return textCfg
            }
          })
          this.monthChart.tooltip({
            showItemMarker: false,
            onShow (ev) {
              let items = ev.items
              items[0].name = null
              items[0].name = items[0].title + '号'
              items[0].value = items[0].value + '吨'
            }
          })
          /* this.monthChart.guide().text({
                 position: ['min', 'max'],
                 content: '单位（吨）',
                 style: {
                   textBaseline: 'middle',
                   textAlign: 'center'
                 },
                 offsetY: -35
               }); */
          this.monthChart.interval().position('DEVICE_CODE*WEIGHT').color('DEVICE_CODE')
          this.monthChart.render()
        }
      } else {
        this.monthChart.repaint()
      }
    },
    showDaysData () {
      if (Object.keys(this.daysChart).length === 0) {
        if (process.env.NODE_ENV === 'development') {
          this.daysData = daysData
        }
        if (this.daysData && this.daysData.length) {
          this.daysChart = new F2.Chart({
            el: this.$refs.days,
            pixelRatio: window.devicePixelRatio // 指定分辨率
          })
          this.daysChart.source(this.daysData, {
            DATE_STR: {
              tickCount: 4
            }
          })
          this.daysChart.tooltip({
            showCrosshairs: true,
            showItemMarker: false,
            onShow (ev) {
              let items = ev.items
              items[0].name = items[0].title
              items[0].value = items[0].value + '吨'
            }
          })
          this.daysChart.axis('DATE_STR', {
            label: (text, index, total) => {
              let textCfg = {}
              if (index === 0) {
                textCfg.textAlign = 'left'
              } else if (index === total - 1) {
                textCfg.textAlign = 'right'
              }
              return textCfg
            }
          })
          this.daysChart.line().position('DATE_STR*WEIGHT')
          this.daysChart.point().position('DATE_STR*WEIGHT').style({
            stroke: '#fff',
            lineWidth: 1
          })
          this.daysChart.render()
        }
      } else {
        this.daysChart.repaint()
      }
    },
    showMonthProgressData () {
      if (Object.keys(this.monthProgressChart).length === 0) {
        if (process.env.NODE_ENV === 'development') {
          this.monthProgressData = monthProgressData
        }
        if (this.monthProgressData && Object.keys(this.monthProgressData).length !== 0) {
          this.monthProgressChart = new F2.Chart({
            el: this.$refs.monthProgress,
            pixelRatio: window.devicePixelRatio // 指定分辨率
          })
          this.monthProgressChart.source(this.transMonthProgressData(this.monthProgressData))
          this.monthProgressChart.tooltip({
            custom: true, // 自定义 tooltip 内容框
            onChange: obj => {
              let legend = this.monthProgressChart.get('legendController').legends.top[0]
              let tooltipItems = obj.items
              let legendItems = legend.items
              let map = {}
              legendItems.map(item => {
                map[item.name] = _.clone(item)
              })
              tooltipItems.map(item => {
                let name = item.name
                let value = item.value
                if (map[name]) {
                  map[name].value = value
                }
              })
              legend.setItems(_.values(map))
            },
            onHide: () => {
              let legend = this.monthProgressChart.get('legendController').legends.top[0]
              legend.setItems(this.monthProgressChart.getLegendItems().country)
            }
          })
          this.monthProgressChart.interval().position('type*value').color('name').adjust({
            type: 'dodge',
            marginRatio: 0.05 // 设置分组间柱子的间距
          })
          this.monthProgressChart.render()
        }
      } else {
        this.monthProgressChart.repaint()
      }
    },
    transMonthData (data) {
      if (data && data.length) {
        for (let d of data) {
          d.WEIGHT = parseFloat(d.WEIGHT)
        }
      }
      return data
    },
    transMonthProgressData (data) {
      return [
        { name: '月计划产量（吨）', type: '正锭产量', value: parseFloat(data.BR_QTY) },
        { name: '月实际产量（吨）', type: '正锭产量', value: parseFloat(data.BR_WEIGHT) },
        { name: '月计划产量（吨）', type: '提纯锭产量', value: parseFloat(data.T_QTY) },
        { name: '月实际产量（吨）', type: '提纯锭产量', value: parseFloat(data.T_WEIGHT) }]
    },
    initCharts () {
      this.getData()
    }

  },
  created () {

  }

}
</script>

<style scoped>

</style>
